@charset "utf-8";
@import './_reset';
body {
			  height: 100vh;
			  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
			  overflow: hidden;
			  filter: drop-shadow(0 0 10px white);
			}
			
			@function random_range($min, $max) {
			  $rand: random();
			  $random_range: $min + floor($rand * (($max - $min) + 1));
			  @return $random_range;
			}
			
			.snow {
			  $total: 200;
			  position: absolute;
			  width: 10px;
			  height: 10px;
			  background: white;
			  border-radius: 50%;
			
			  @for $i from 1 through $total {
			    $random-x: random(1000000) * 0.0001vw;
			    $random-offset: random_range(-100000, 100000) * 0.0001vw;
			    $random-x-end: $random-x + $random-offset;
			    $random-x-end-yoyo: $random-x + ($random-offset / 2);
			    $random-yoyo-time: random_range(30000, 80000) / 100000;
			    $random-yoyo-y: $random-yoyo-time * 100vh;
			    $random-scale: random(10000) * 0.0001;
			    $fall-duration: random_range(10, 30) * 1s;
			    $fall-delay: random(30) * -1s;
			
			    &:nth-child(#{$i}) {
			      opacity: random(10000) * 0.0001;
			      transform: translate($random-x, -10px) scale($random-scale);
			      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
			    }
			
			    @keyframes fall-#{$i} {
			      #{percentage($random-yoyo-time)} {
			        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
			      }
			      
			      to {
			        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
			      }
			    }
			  }
			}


.navbar{
	height: 97px;
	z-index: 999;
}
.logo{
	display: flex;
	align-items: center;
	height: 100%;
	img{
		width: 100%;
		height: 100%;
	}
}
.navbar-inverse {
    background-color: #000000;
    border-color: #080808;
}
.navbar-brand {

    padding: 0px 15px;

}
.nav{
	margin-top: 23px;
	
	// height: 72px;
	>li{
		// font-size: 20px;
		position: relative;
		margin-right: 5px;
	}
	>li::before{
		content: "";
		background-color: red;
		width: 0;
		height: 1px;
		position: absolute;
		top: -5px;
		left: 50%;
		transition: all .5s;
	}
	>li:hover::before{
		width: 100%;
		left: 0;
	}
	>li:nth-child(1)::after{
		content: "小";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(2)::after{
		content: "欣";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(3)::after{
		content: "子";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(4)::after{
		content: "520";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(5)::after{
		content: "61节";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -24px;
		transition: all .5s;
	}
	>li:nth-child(6)::after{
		content: "快乐呀";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		top: 60%;
		left: 25%;
		transition: all .5s;
	}
	>li:hover::after{
		opacity: 1;
	}
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: hotpink;
	border-radius: 5px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: rgba(255,105,180,.5);
	border-radius: 5px;
}


@media only screen and (min-width:768px) and (max-width:991px){
	.logo{
		margin-right: 0;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.navbar-brand{
		padding-left: 3px;
		padding-right: 3px;
	}
	.nav>li>a{
		padding: 15px 15px;

	}
}


.navbar-toggle {
	  position: relative;
	  float: right;
	  padding: 9px 10px;
	  margin-top: 26px;
	  margin-right: 15px;
	  margin-bottom: 8px;
	  background-color: transparent;
	  background-image: none;
	  border: 1px solid transparent;
	  border-radius: 4px;
}
